<template>


<!--  <div id="container" style="width:100vw;height:90vh" />-->
  <div id="container" style="width:100vw;height:90vh"></div>

</template>

<script>
// import car from '@/assets/images/logo.png' //引用标注图标
import car from '@/assets/mask.png' //引用标注图标

//绘制线路需要的坐标
var myPath = [
    [116.405289, 39.904987],
    [113.964458, 40.54664],
    [111.47836, 41.135964],
    [108.949297, 41.670904],
    [106.380111, 42.149509],
    [103.774185, 42.56996],
    [101.135432, 42.930601],
    [98.46826, 43.229964],
    [95.777529, 43.466798],
    [93.068486, 43.64009],
    [90.34669, 43.749086],
    [87.61792, 43.793308]
  ],
  endIdx = 0,
  data = [{
    name: '动态路线',
    path: myPath.slice(0, 1)
  }];
export default {
  data() {
    return {
      firstArr: [116.478935, 39.997761] //中心点/初始坐标
    }
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.initMap() //异步加载（否则报错initMap is not defined）
      this.initroad()
    }, 1000)
  },

  methods: {
    // 初始化地图
    initMap() {
      var that = this
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 窗口大小调整
        center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
        zoom: 5
      })
      // 添加工具栏
      this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        // 工具条
        const toolbar = new AMap.ToolBar()
        // 比例尺
        const scale = new AMap.Scale()
        this.map.addControl(toolbar)
        this.map.addControl(scale)
      })
      // 添加maker
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.firstArr,
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13), // 调整图片偏移
        autoRotation: true, // 自动旋转
        angle: -90 // 图片旋转角度
      })
      // maker点击事件
      this.marker.on('click', function(e) {
        console.log(`我被点击啦---`, e)
        that.initroad() //点击maker绘制轨迹
        setTimeout(() => {
          this.moveAlong(lineArr, 1000000) // 动态描点(需要二次动态绘制轨迹开启)
        },500)
      })
    },
    // 初始化轨迹
    initroad() {
      // 绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', // 线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round' // 折线拐点的绘制样式
      })
      // 绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#AF5', // 线颜色-绿色
        // path: lineArr.reverse(),
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      this.marker.on('moving', e => {
        passedPolyline.setPath(e.passedPath)
      })
      this.map.setFitView() // 合适的视口
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0px;
}
</style>
